<template>
  <div class="statistics-page">
    <!-- 面包屑导航 -->
    <a-breadcrumb class="page-breadcrumb">
      <a-breadcrumb-item>
        <router-link to="/statistics">统计分析中心</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>轮回数据分析</a-breadcrumb-item>
      <a-breadcrumb-item>修行进度报告</a-breadcrumb-item>
    </a-breadcrumb>

    <!-- 页面标题 -->
    <div class="dashboard-header">
      <div class="header-content">
        <div class="ancient-title">修行进度报告</div>
        <div class="header-subtitle">阴曹地府 · 功德修行监测</div>
      </div>
      <div class="header-decoration">
        <div class="decoration-line"></div>
        <div class="decoration-symbol">⚊</div>
        <div class="decoration-line"></div>
      </div>
    </div>

    <!-- 核心指标卡片 -->
    <div class="stats-section">
      <a-row :gutter="[20, 20]" class="stats-grid">
        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card progress-rate">
            <div class="stat-icon">
              <FundOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">平均修行进度</div>
              <div class="stat-value">{{ avgProgress }}%</div>
              <div class="stat-label">稳步提升</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card completion-rate">
            <div class="stat-icon">
              <TrophyOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">完成率</div>
              <div class="stat-value">{{ completionRate }}%</div>
              <div class="stat-label">优秀水平</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card cultivators-count">
            <div class="stat-icon">
              <TeamOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">修行者总数</div>
              <div class="stat-value">{{ cultivatorsCount }}</div>
              <div class="stat-label">活跃用户</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card avg-time">
            <div class="stat-icon">
              <ClockCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">平均修行时间</div>
              <div class="stat-value">{{ avgTime }}</div>
              <div class="stat-label">年</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 主要图表区域 -->
    <div class="main-content">
      <a-row :gutter="[32, 32]" class="content-grid">
        <!-- 修行等级分布 -->
        <a-col :xs="24" :lg="12">
          <a-card title="修行等级分布" :bordered="false" class="chart-card">
            <template #extra>
              <a-select v-model:value="levelPeriod" style="width: 120px">
                <a-select-option value="current">当前分布</a-select-option>
                <a-select-option value="monthly">月度对比</a-select-option>
                <a-select-option value="yearly">年度对比</a-select-option>
              </a-select>
            </template>
            <div class="chart-container">
              <v-chart :option="levelDistributionOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 修行进度趋势 -->
        <a-col :xs="24" :lg="12">
          <a-card title="修行进度趋势" :bordered="false" class="chart-card">
            <template #extra>
              <a-select v-model:value="trendPeriod" style="width: 120px">
                <a-select-option value="6">近6月</a-select-option>
                <a-select-option value="12">近1年</a-select-option>
                <a-select-option value="24">近2年</a-select-option>
              </a-select>
            </template>
            <div class="chart-container">
              <v-chart :option="progressTrendOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 功德获取渠道分析 -->
        <a-col :xs="24">
          <a-card title="功德获取渠道分析" :bordered="false" class="chart-card">
            <template #extra>
              <a-space>
                <a-select v-model:value="meritSource" style="width: 120px">
                  <a-select-option value="all">全部渠道</a-select-option>
                  <a-select-option value="charity">慈善行为</a-select-option>
                  <a-select-option value="practice">修行实践</a-select-option>
                  <a-select-option value="wisdom">智慧学习</a-select-option>
                </a-select>
                <a-button @click="exportMeritData">
                  <DownloadOutlined />
                  导出数据
                </a-button>
              </a-space>
            </template>
            <div class="chart-container">
              <v-chart :option="meritSourceOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 修行阶段雷达图 -->
        <a-col :xs="24" :lg="14">
          <a-card title="修行阶段综合评估" :bordered="false" class="chart-card">
            <div class="chart-container">
              <v-chart :option="cultivationRadarOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 进度分析报告 -->
        <a-col :xs="24" :lg="10">
          <a-card title="修行进度分析报告" :bordered="false" class="report-card">
            <div class="report-content">
              <div class="report-section">
                <h4>当前状况</h4>
                <div class="status-item">
                  <div class="status-indicator positive"></div>
                  <span>整体进度良好</span>
                </div>
                <div class="status-item">
                  <div class="status-indicator positive"></div>
                  <span>高级修行者增多</span>
                </div>
                <div class="status-item">
                  <div class="status-indicator neutral"></div>
                  <span>中级修行稳定</span>
                </div>
              </div>

              <div class="report-section">
                <h4>发展趋势</h4>
                <ul class="trend-list">
                  <li>功德获取效率提升</li>
                  <li>修行质量不断优化</li>
                  <li>参与者积极性高涨</li>
                  <li>传承体系日趋完善</li>
                </ul>
              </div>

              <div class="report-section">
                <h4>优化建议</h4>
                <ul class="suggestion-list">
                  <li>加强初学者指导</li>
                  <li>丰富修行方式</li>
                  <li>完善激励机制</li>
                  <li>建立交流平台</li>
                </ul>
              </div>
            </div>
          </a-card>
        </a-col>

        <!-- 修行成就统计 -->
        <a-col :xs="24">
          <a-card title="修行成就统计" :bordered="false" class="chart-card">
            <template #extra>
              <a-radio-group v-model:value="achievementType" button-style="solid" size="small">
                <a-radio-button value="breakthrough">突破成就</a-radio-button>
                <a-radio-button value="merit">功德成就</a-radio-button>
                <a-radio-button value="time">时间成就</a-radio-button>
              </a-radio-group>
            </template>
            <div class="chart-container">
              <v-chart :option="achievementOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <!-- 详细数据表格 -->
    <div class="table-section">
      <a-card title="修行者详细进度统计" :bordered="false">
        <template #extra>
          <a-space>
            <a-input-search v-model:value="searchKeyword" placeholder="搜索修行者或等级" style="width: 200px" @search="handleSearch" />
            <a-button @click="exportData">
              <ExportOutlined />
              导出全部
            </a-button>
          </a-space>
        </template>
        <a-table :columns="tableColumns" :data-source="tableData" :pagination="tablePagination" :loading="tableLoading" :scroll="{ x: 1800 }" @change="handleTableChange" />
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { message } from 'ant-design-vue'
import { FundOutlined, TrophyOutlined, TeamOutlined, ClockCircleOutlined, DownloadOutlined, ExportOutlined } from '@ant-design/icons-vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, BarChart, PieChart, RadarChart, ScatterChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, ToolboxComponent, RadarComponent } from 'echarts/components'
import VChart from 'vue-echarts'

// 注册 ECharts 组件
use([CanvasRenderer, LineChart, BarChart, PieChart, RadarChart, ScatterChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, ToolboxComponent, RadarComponent])

// 响应式数据
const loading = ref(false)
const levelPeriod = ref('current')
const trendPeriod = ref('12')
const meritSource = ref('all')
const achievementType = ref('breakthrough')
const searchKeyword = ref('')
const tableLoading = ref(false)

// 核心指标数据
const avgProgress = ref(73.2)
const completionRate = ref(68.7)
const cultivatorsCount = ref('98,765')
const avgTime = ref('12.3')

// 表格配置
const tableColumns = reactive([
  {
    title: '修行等级',
    dataIndex: 'level',
    key: 'level',
    fixed: 'left',
    width: 120
  },
  {
    title: '修行者数量',
    dataIndex: 'count',
    key: 'count',
    sorter: true
  },
  {
    title: '平均进度',
    dataIndex: 'avgProgress',
    key: 'avgProgress',
    sorter: true,
    render: (value) => `${value}%`
  },
  {
    title: '完成数量',
    dataIndex: 'completed',
    key: 'completed',
    sorter: true
  },
  {
    title: '功德总值',
    dataIndex: 'totalMerit',
    key: 'totalMerit',
    sorter: true
  },
  {
    title: '平均时长',
    dataIndex: 'avgDuration',
    key: 'avgDuration',
    sorter: true,
    render: (value) => `${value}年`
  },
  {
    title: '本月新增',
    dataIndex: 'monthlyNew',
    key: 'monthlyNew',
    sorter: true
  },
  {
    title: '晋升率',
    dataIndex: 'promotionRate',
    key: 'promotionRate',
    sorter: true,
    render: (value) => `${value}%`
  },
  {
    title: '变化趋势',
    dataIndex: 'trend',
    key: 'trend',
    render: (value) => {
      const color = value > 0 ? '#52c41a' : value < 0 ? '#ff4d4f' : '#1890ff'
      const icon = value > 0 ? '↗' : value < 0 ? '↘' : '→'
      return {
        children: `${icon} ${Math.abs(value)}%`,
        style: { color }
      }
    }
  }
])

const tableData = ref([])
const tablePagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total) => `共 ${total} 条记录`
})

// 图表配置项
const levelDistributionOption = computed(() => ({
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    textStyle: { color: '#e6f7ff' }
  },
  series: [
    {
      name: '修行等级',
      type: 'pie',
      radius: ['40%', '70%'],
      data: [
        { value: 35.2, name: '初级修行', itemStyle: { color: '#52c41a' } },
        { value: 28.6, name: '中级修行', itemStyle: { color: '#1890ff' } },
        { value: 19.8, name: '高级修行', itemStyle: { color: '#722ed1' } },
        { value: 12.4, name: '大师级', itemStyle: { color: '#fa8c16' } },
        { value: 3.2, name: '宗师级', itemStyle: { color: '#eb2f96' } },
        { value: 0.8, name: '圣者级', itemStyle: { color: '#f5222d' } }
      ]
    }
  ]
}))

const progressTrendOption = computed(() => ({
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['整体进度', '初级', '中级', '高级', '大师级'],
    textStyle: { color: '#e6f7ff' }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: generateTimeData(),
    axisLine: { lineStyle: { color: '#40a9ff' } },
    axisLabel: { color: '#91d5ff' }
  },
  yAxis: {
    type: 'value',
    axisLine: { lineStyle: { color: '#40a9ff' } },
    axisLabel: { color: '#91d5ff' },
    splitLine: { lineStyle: { color: '#1890ff', opacity: 0.3 } }
  },
  series: [
    {
      name: '整体进度',
      type: 'line',
      smooth: true,
      lineStyle: { color: '#52c41a', width: 3 },
      data: generateProgressData('overall')
    },
    {
      name: '初级',
      type: 'line',
      smooth: true,
      lineStyle: { color: '#1890ff', width: 2 },
      data: generateProgressData('beginner')
    },
    {
      name: '中级',
      type: 'line',
      smooth: true,
      lineStyle: { color: '#722ed1', width: 2 },
      data: generateProgressData('intermediate')
    },
    {
      name: '高级',
      type: 'line',
      smooth: true,
      lineStyle: { color: '#fa8c16', width: 2 },
      data: generateProgressData('advanced')
    },
    {
      name: '大师级',
      type: 'line',
      smooth: true,
      lineStyle: { color: '#eb2f96', width: 2 },
      data: generateProgressData('master')
    }
  ]
}))

const meritSourceOption = computed(() => ({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['慈善行为', '修行实践', '智慧学习', '善行积累', '传承教导'],
    textStyle: { color: '#e6f7ff' }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: generateTimeData(),
    axisLine: { lineStyle: { color: '#40a9ff' } },
    axisLabel: { color: '#91d5ff' }
  },
  yAxis: {
    type: 'value',
    axisLine: { lineStyle: { color: '#40a9ff' } },
    axisLabel: { color: '#91d5ff' },
    splitLine: { lineStyle: { color: '#1890ff', opacity: 0.3 } }
  },
  series: [
    {
      name: '慈善行为',
      type: 'bar',
      stack: 'total',
      data: generateMeritData('charity'),
      itemStyle: { color: '#52c41a' }
    },
    {
      name: '修行实践',
      type: 'bar',
      stack: 'total',
      data: generateMeritData('practice'),
      itemStyle: { color: '#1890ff' }
    },
    {
      name: '智慧学习',
      type: 'bar',
      stack: 'total',
      data: generateMeritData('wisdom'),
      itemStyle: { color: '#722ed1' }
    },
    {
      name: '善行积累',
      type: 'bar',
      stack: 'total',
      data: generateMeritData('goodDeeds'),
      itemStyle: { color: '#fa8c16' }
    },
    {
      name: '传承教导',
      type: 'bar',
      stack: 'total',
      data: generateMeritData('teaching'),
      itemStyle: { color: '#eb2f96' }
    }
  ]
}))

const cultivationRadarOption = computed(() => ({
  tooltip: {},
  legend: {
    data: ['初级', '中级', '高级', '大师级'],
    textStyle: { color: '#e6f7ff' }
  },
  radar: {
    indicator: [
      { name: '功德积累', max: 100 },
      { name: '智慧领悟', max: 100 },
      { name: '道德品质', max: 100 },
      { name: '实践能力', max: 100 },
      { name: '传承贡献', max: 100 },
      { name: '境界提升', max: 100 }
    ],
    name: {
      textStyle: { color: '#91d5ff' }
    },
    splitLine: {
      lineStyle: { color: '#40a9ff', opacity: 0.5 }
    },
    splitArea: {
      areaStyle: {
        color: ['rgba(24, 144, 255, 0.1)', 'rgba(24, 144, 255, 0.05)']
      }
    },
    axisLine: {
      lineStyle: { color: '#40a9ff' }
    }
  },
  series: [
    {
      name: '修行阶段评估',
      type: 'radar',
      data: [
        {
          value: [45, 42, 48, 40, 35, 38],
          name: '初级',
          areaStyle: { color: 'rgba(82, 196, 26, 0.3)' }
        },
        {
          value: [68, 65, 72, 70, 62, 66],
          name: '中级',
          areaStyle: { color: 'rgba(24, 144, 255, 0.3)' }
        },
        {
          value: [82, 85, 88, 80, 78, 84],
          name: '高级',
          areaStyle: { color: 'rgba(114, 46, 209, 0.3)' }
        },
        {
          value: [95, 92, 98, 94, 90, 96],
          name: '大师级',
          areaStyle: { color: 'rgba(250, 140, 22, 0.3)' }
        }
      ]
    }
  ]
}))

const achievementOption = computed(() => ({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  legend: {
    data: ['突破次数', '获得成就', '完成度'],
    textStyle: { color: '#e6f7ff' }
  },
  xAxis: {
    type: 'category',
    data: ['初级修行', '中级修行', '高级修行', '大师级', '宗师级', '圣者级'],
    axisLine: { lineStyle: { color: '#40a9ff' } },
    axisLabel: { color: '#91d5ff' }
  },
  yAxis: [
    {
      type: 'value',
      name: '数量',
      axisLine: { lineStyle: { color: '#40a9ff' } },
      axisLabel: { color: '#91d5ff' },
      splitLine: { lineStyle: { color: '#1890ff', opacity: 0.3 } }
    },
    {
      type: 'value',
      name: '完成度(%)',
      axisLine: { lineStyle: { color: '#40a9ff' } },
      axisLabel: { color: '#91d5ff' },
      splitLine: { show: false }
    }
  ],
  series: [
    {
      name: '突破次数',
      type: 'bar',
      data: [1250, 890, 650, 320, 120, 45],
      itemStyle: { color: '#52c41a' }
    },
    {
      name: '获得成就',
      type: 'bar',
      data: [980, 720, 580, 280, 95, 38],
      itemStyle: { color: '#1890ff' }
    },
    {
      name: '完成度',
      type: 'line',
      yAxisIndex: 1,
      data: [78.4, 80.9, 89.2, 87.5, 79.2, 84.4],
      lineStyle: { color: '#fa8c16', width: 3 },
      itemStyle: { color: '#fa8c16' }
    }
  ]
}))

// 数据生成函数
function generateTimeData() {
  const months = parseInt(trendPeriod.value)
  const data = []
  const currentDate = new Date()

  for (let i = months - 1; i >= 0; i--) {
    const date = new Date(currentDate.getFullYear(), currentDate.getMonth() - i, 1)
    data.push(`${date.getFullYear()}年${date.getMonth() + 1}月`)
  }
  return data
}

function generateProgressData(type) {
  const timeData = generateTimeData()
  const data = []
  const baseValues = {
    overall: 70,
    beginner: 45,
    intermediate: 68,
    advanced: 82,
    master: 95
  }
  let baseValue = baseValues[type]

  timeData.forEach(() => {
    baseValue += (Math.random() - 0.5) * 4
    data.push(Math.round(Math.max(20, Math.min(100, baseValue)) * 10) / 10)
  })
  return data
}

function generateMeritData(source) {
  const timeData = generateTimeData()
  const data = []
  const baseValues = {
    charity: 2500,
    practice: 2200,
    wisdom: 1800,
    goodDeeds: 1500,
    teaching: 1200
  }
  let baseValue = baseValues[source]

  timeData.forEach(() => {
    baseValue += Math.random() * 500 - 200
    data.push(Math.round(Math.max(500, baseValue)))
  })
  return data
}

// 生成表格数据
function generateTableData() {
  const levels = [
    { name: '初级修行', base: 35.2 },
    { name: '中级修行', base: 28.6 },
    { name: '高级修行', base: 19.8 },
    { name: '大师级', base: 12.4 },
    { name: '宗师级', base: 3.2 },
    { name: '圣者级', base: 0.8 }
  ]

  return levels.map((level, index) => {
    const count = Math.floor(Math.random() * 50000 + 5000)
    const completed = Math.floor(count * (0.6 + Math.random() * 0.3))

    return {
      key: index,
      level: level.name,
      count: count.toLocaleString(),
      avgProgress: (60 + Math.random() * 30).toFixed(1),
      completed: completed.toLocaleString(),
      totalMerit: (Math.random() * 1000000 + 100000).toFixed(0),
      avgDuration: (8 + Math.random() * 15).toFixed(1),
      monthlyNew: Math.floor(Math.random() * 2000 + 200).toLocaleString(),
      promotionRate: (20 + Math.random() * 40).toFixed(1),
      trend: (Math.random() * 12 - 6).toFixed(1)
    }
  })
}

// 事件处理函数
const handleSearch = (value) => {
  console.log('搜索:', value)
}

const handleTableChange = (pagination, filters, sorter) => {
  tablePagination.current = pagination.current
  tablePagination.pageSize = pagination.pageSize

  if (sorter.field) {
    console.log('排序:', sorter)
  }
}

const exportMeritData = () => {
  message.success('功德数据导出成功')
}

const exportData = () => {
  message.success('全部数据导出成功')
}

// 监听器
watch(trendPeriod, () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 1000)
})

watch(levelPeriod, () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 800)
})

watch(meritSource, () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 600)
})

// 组件挂载
onMounted(async () => {
  loading.value = true

  try {
    await new Promise((resolve) => setTimeout(resolve, 1000))

    tableData.value = generateTableData()
    tablePagination.total = tableData.value.length
  } catch (error) {
    message.error('数据加载失败')
  } finally {
    loading.value = false
  }
})
</script>

<style scoped>
/* 复用通用样式 */
.statistics-page {
  min-height: 100vh;
  padding: 24px;
  color: #e6f7ff;
}

.page-breadcrumb {
  margin-bottom: 24px;
}

.page-breadcrumb .ant-breadcrumb-link {
  color: #91d5ff;
}

.dashboard-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 40px 0;
  background: linear-gradient(45deg, rgba(24, 144, 255, 0.1), rgba(82, 196, 26, 0.1));
  border-radius: 16px;
  border: 1px solid rgba(24, 144, 255, 0.3);
}

.header-content {
  margin-bottom: 20px;
}

.ancient-title {
  font-size: 48px;
  font-weight: bold;
  background: linear-gradient(45deg, #40a9ff, #52c41a, #722ed1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  text-shadow: 0 0 30px rgba(64, 169, 255, 0.5);
}

.header-subtitle {
  font-size: 18px;
  color: #91d5ff;
  opacity: 0.8;
}

.header-decoration {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.decoration-line {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #40a9ff, transparent);
}

.decoration-symbol {
  font-size: 24px;
  color: #40a9ff;
  text-shadow: 0 0 10px rgba(64, 169, 255, 0.8);
}

.stats-section {
  margin-bottom: 32px;
}

.stats-grid .ant-col {
  margin-bottom: 20px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.stat-card:hover::before {
  transform: translateX(100%);
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border-color: rgba(64, 169, 255, 0.5);
}

.stat-icon {
  font-size: 32px;
  padding: 16px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-rate .stat-icon {
  background: linear-gradient(45deg, #52c41a, #73d13d);
  color: white;
}

.completion-rate .stat-icon {
  background: linear-gradient(45deg, #1890ff, #40a9ff);
  color: white;
}

.cultivators-count .stat-icon {
  background: linear-gradient(45deg, #722ed1, #9254de);
  color: white;
}

.avg-time .stat-icon {
  background: linear-gradient(45deg, #fa8c16, #ffa940);
  color: white;
}

.stat-content {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #91d5ff;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #e6f7ff;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: #52c41a;
}

.main-content {
  margin-bottom: 32px;
}

.content-grid .ant-col {
  margin-bottom: 32px;
}

.chart-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
}

.chart-card .ant-card-head {
  background: rgba(24, 144, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.chart-card .ant-card-head-title {
  color: #e6f7ff;
  font-weight: 600;
}

.chart-card .ant-card-body {
  background: rgba(0, 0, 0, 0.2);
}

.chart-container {
  padding: 16px;
}

.report-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  height: 400px;
}

.report-card .ant-card-head {
  background: rgba(24, 144, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.report-card .ant-card-head-title {
  color: #e6f7ff;
  font-weight: 600;
}

.report-card .ant-card-body {
  background: rgba(0, 0, 0, 0.2);
  height: calc(100% - 56px);
  overflow-y: auto;
}

.report-content {
  padding: 16px;
}

.report-section {
  margin-bottom: 24px;
}

.report-section h4 {
  color: #40a9ff;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  border-left: 3px solid #40a9ff;
  padding-left: 8px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #e6f7ff;
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-indicator.positive {
  background: #52c41a;
  box-shadow: 0 0 6px rgba(82, 196, 26, 0.8);
}

.status-indicator.neutral {
  background: #1890ff;
  box-shadow: 0 0 6px rgba(24, 144, 255, 0.8);
}

.status-indicator.warning {
  background: #fa8c16;
  box-shadow: 0 0 6px rgba(250, 140, 22, 0.8);
}

.trend-list,
.suggestion-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.trend-list li,
.suggestion-list li {
  color: #e6f7ff;
  font-size: 14px;
  margin-bottom: 6px;
  padding-left: 16px;
  position: relative;
}

.trend-list li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: #52c41a;
}

.suggestion-list li::before {
  content: '※';
  position: absolute;
  left: 0;
  color: #40a9ff;
}

.table-section {
  margin-top: 32px;
}

.table-section .ant-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

.table-section .ant-card-head {
  background: rgba(24, 144, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.table-section .ant-card-head-title {
  color: #e6f7ff;
  font-weight: 600;
}

.table-section .ant-card-body {
  background: rgba(0, 0, 0, 0.2);
}

:deep(.ant-table) {
  background: transparent;
}

:deep(.ant-table-thead > tr > th) {
  background: rgba(24, 144, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #e6f7ff;
}

:deep(.ant-table-tbody > tr > td) {
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #e6f7ff;
}

:deep(.ant-table-tbody > tr:hover > td) {
  background: rgba(24, 144, 255, 0.1);
}

:deep(.ant-pagination) {
  text-align: center;
  margin-top: 24px;
}

:deep(.ant-pagination .ant-pagination-item) {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

:deep(.ant-pagination .ant-pagination-item a) {
  color: #e6f7ff;
}

:deep(.ant-pagination .ant-pagination-item-active) {
  background: #1890ff;
  border-color: #1890ff;
}

:deep(.ant-pagination .ant-pagination-item-active a) {
  color: white;
}

@media (max-width: 768px) {
  .ancient-title {
    font-size: 32px;
  }

  .header-subtitle {
    font-size: 16px;
  }

  .stat-value {
    font-size: 24px;
  }

  .chart-container {
    padding: 8px;
  }
}
</style>
